{{define "backend/layout.html"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <link rel="stylesheet" href="/static/css/backend/main.css" />
    <link rel="stylesheet" href="/static/js/lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Import component library -->
    <script src="https://unpkg.com/element-plus"></script>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        appConfig = {
            action: 'index',
        }
    </script>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .web-title:hover {
            background: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="main flex h-dvh">
            <div class="menus h-full">
                <!-- <div class="h-[50px] text-center leading-[50px] font-bold text-white bg-[#545c64]">
                    <span v-if="isCollapse">DM</span>
                    <span v-else>{{.title}}</span>
                </div> -->
                <el-menu :default-active="activeIndex" :show-timeout="10" :hide-timeout="10" :popper-offset="0"
                    style="height: 100vh;" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                    @select="handleSelect" :collapse="isCollapse">
                    <el-menu-item class="web-title">
                        <span v-if="isCollapse">
                            DM
                        </span>
                        <template #title>{{.title}}</template>
                    </el-menu-item>
                    <el-menu-item index="1">
                        <el-icon>
                            <i class="fa fa-home" aria-hidden="true"></i>
                        </el-icon>
                        <template #title>首页</template>
                    </el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <i class="fa fa-home" aria-hidden="true"></i>
                            </el-icon>
                            <span>常规管理</span>
                        </template>
                        <el-menu-item index="2-1">系统配置</el-menu-item>
                        <el-menu-item index="2-2">附件管理</el-menu-item>
                        <el-menu-item index="2-3">个人资料</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <i class="fa fa-home" aria-hidden="true"></i>
                            </el-icon>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="3-1">管理员管理</el-menu-item>
                        <el-menu-item index="3-2">管理员日志</el-menu-item>
                        <el-menu-item index="3-3">角色组</el-menu-item>
                        <el-menu-item index="3-3">菜单规则</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <i class="fa fa-home" aria-hidden="true"></i>
                            </el-icon>
                            <span>会员管理</span>
                        </template>
                        <el-menu-item index="4-1">会员列表</el-menu-item>
                        <el-menu-item index="4-2">会员分组</el-menu-item>
                        <el-menu-item index="4-3">会员规则</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="5">
                        <el-icon>
                            <i class="fa fa-home" aria-hidden="true"></i>
                        </el-icon>
                        <template #title>插件管理</template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <el-icon>
                            <i class="fa fa-home" aria-hidden="true"></i>
                        </el-icon>
                        <template #title>一键crud</template>
                    </el-menu-item>
                </el-menu>
            </div>

            <div class="content flex-1">
                <div class="h-[50px] flex items-center shadow-md">
                    <i class="fa fa-bars ml-2 cursor-pointer" aria-hidden="true"
                        @click="()=>isCollapse = !isCollapse"></i>
                    <div class="flex justify-between w-full">
                        <div class="nav-tag"></div>
                        <div class="tools flex">
                            <div class="item px-2 cursor-pointer">
                                <i class="fa fa-user mr-1" aria-hidden="true"></i>
                                <span>解决方案</span>
                            </div>
                            <div class="item px-2 cursor-pointer">
                                <i class="fa fa-user mr-1" aria-hidden="true"></i>
                                <span>清除缓存</span>
                            </div>
                            <div class="item px-2 cursor-pointer">
                                <i class="fa fa-user mr-1" aria-hidden="true"></i>
                                <span>退出</span>
                            </div>
                        </div>
                    </div>
                </div>
                <h4>用户管理</h4>
                <iframe :src="mainUrl" frameborder="0" width="100%"></iframe>
            </div>
        </div>
    </div>

    <script src="/static/js/lib/helper.js"></script>
    <script src="/static/js/backend/admin.js"></script>
</body>

</html>
{{end}}